<template>
	<s-layout title="选择出行人">
		<!-- 标题栏 -->
		<checkbox-group class="list" @change='setChecked'>
			<label class="card" v-for="(item,index) in state.list" :key='index'>
				<view class="left">
					<view class="title">
						<text class='name'>{{item.realName}}</text>
						<text class="iconfont" :class='item.gander==1?"icon-nv":"icon-nan"'></text>
					</view>
					<view class="id">{{item.mobile}} | {{item.cardId}}</view>
				</view>
				<checkbox :checked='item.checked' :value='index' />
			</label>
		</checkbox-group>
		<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无出行人" icon="/static/data-empty.png" />
		<view class="pos iconfont icon-jiahao1" @click="navTo('/pages/traveler/add')"></view>
		<view class="btn">
			<view style="height: 80rpx;"></view>
			<button class="pos" @click='send'>确定</button>
		</view>
		<view class="poss iconfont icon-jiahao1" @click="navTo('/pages/traveler/edit')"></view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		reactive,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	const state = reactive({
		list: [],
		goodsId: 0,
		ids: []
	})

	function navTo(url) {
		uni.navigateTo({
			url
		})
	}
	onShow(async () => {
		state.ids = [];
		state.list = (await sheep.$api.user.trip.list()).data;
		state.list.map(item => item.checked = false)

	});
	onLoad((options) => {
		state.goodsId = options.id;
		state.goods_sku_price_id = options.goods_sku_price_id;
		state.list = [];
	})
	const setChecked = (e) => {
		state.list.map(item => item.checked = false)
		state.list.map((item, index) => e.detail.value.map(e => e == index ? item.checked = true : null))
	}
	const send = async () => {
		state.list.map(item => item.checked ? state.ids.push(item.id) : null)

		// const { code, data } = await sheep.$api.order.create(goods_list);
		// if (code === 1) {
		//     if (exchangeNow.value) {
		//         sheep.$router.redirect('/pages/pay/result', {
		//             orderSN: data.order_sn,
		//         });
		//     }
		// }
		if (!state.ids.length) {
			sheep.$helper.toast('请选择出行人');
			return;
		}

		sheep.$router.go('/pages/order/confirm', {
			data: JSON.stringify({
				order_type: 'goods',
				trip_ids: state.ids,
				goods_list: [{
					goods_id: state.goodsId,
					goods_num: 1,
					goods_sku_price_id: state.goods_sku_price_id,
				}],
			}),
		});
	}
</script>

<style lang="scss">
	.icon-jiahao1 {
		background-color: var(--ui-BG-Main);
		color: #fff;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		font-size: 36rpx;
		font-weight: bold;
		position: fixed;
		right: 40rpx;
		bottom: 120rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.pos {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: var(--ui-BG-Main);
		color: #fff;
	}

	.list {
		padding: 20rpx;

		.card {
			padding: 40rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.title {
				margin-bottom: 20rpx;

				.name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.iconfont {
					margin-left: 10rpx;
				}

				.icon-nv {
					color: pink;
				}

				.icon-nan {
					color: skyblue;
				}
			}
		}
	}
</style>